<template>
    <div class="map">
        <el-dialog
            title="上传商品图"
            :visible.sync="isMap.centerDialogVisible"
            width="45%"
            center>
            <p class="p_inps">
                <span>
                    <i class="el-icon-search"></i>
                    <span>搜索地点</span>
                </span>
            </p>
            <div class="map_in">
                <baidu-map :scroll-wheel-zoom='true' @movestart='moveFun' @click="mapsFun" class="bm-view" :center="center" :zoom="zoom" @ready="handler">
                    <!-- 比例尺 -->
                    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                    <!-- 缩放 -->
                    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                    <!-- 地图类型 -->
                    <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->
                    <!-- 缩略图 -->
                    <!-- <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map> -->
                    <!-- 定位 -->
                    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
                    <!-- 城市列表 -->
                    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
                    <!-- 全景 -->
                    <!-- <bm-panorama></bm-panorama> -->
                </baidu-map>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    props:['isMap'],
    data () {
        return {
            center: {lng: 0, lat: 0},
            zoom: 3
        }
    },
    created(){
        if (this.isMap.lng !== 0 || this.isMap.lat !== 0) {
            this.center.lng = this.isMap.lng;
            this.center.lat = this.isMap.lat
        }
    },
    watch:{
        "isMap.lng"(newName, oldName){
            //console.log(newName);
            this.center.lng = newName
        },
        "isMap.lat"(newName, oldName){
            //console.log(newName);
            this.center.lat = newName
        }
    },
    methods: {
        //地图移动
        moveFun({target}){
            //console.log(target);
        },
        //单击触发
        mapsFun({type,target,point,pixel,overlay}){
            
            //console.log(point);
            this.center.lng = point.lng;
            this.center.lat = point.lat;
            this.isMap.centerDialogVisible = false;
            this.$emit('mapVal',{show:this.isMap.centerDialogVisible,places:this.center})
        },
        handler ({BMap, map}) {
            console.log(BMap, map)
            this.center.lng = 116.405
            this.center.lat = 39.915
            this.zoom = 15
        }
    }
}
</script>

<style lang="scss">
.map_in{
    width: 100%;
    height: 300px;
    .bm-view {
        width: 100%;
        height: 300px;
    }
}

.p_inps{
    width: 100%;
    height: 33px;
    background: rgb(235,235,235);
    border-radius: 6px;
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(156,156,156);
}
</style>